<template>
  <div class="main">
    <div class="top">
      <div class="topLeft">
        <p><span style="font-size: 22px">{{ dataBoard.underwayStoreNum }}</span><span style="font-size: 16px">进行中</span>
        </p>
        <p><span style="font-size: 22px">{{ dataBoard.actualPaymentMoney }}</span><span
            style="font-size: 16px">实付金额(万元)</span></p>
      </div>
      <div class="topRight">
        <div style="display: flex;flex-direction: column;
justify-content: space-around">
          <p><span>所有品牌：</span>
            <el-select size="small" v-model="params.brandPartyId" filterable clearable>
              <el-option v-for="item in brandList" :value="item.id" :label="item.brandPartyName"
                         :key="item.id"></el-option>
            </el-select>
          </p>
          <p><span>日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期：</span>
            <el-date-picker
                v-model="params.time"
                size="small"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
            </el-date-picker>
          </p>
        </div>
        <div style="display: flex;flex-direction: column;
justify-content: space-around">
          <p><span>公司名称：</span>
            <el-select size="small" v-model="params.companyId" filterable clearable>
              <el-option v-for="item in companyList" :value="item.companyId" :label="item.companyName"
                         :key="item.companyId"></el-option>
            </el-select>
          </p>
          <p><span>公司类型：</span>
            <el-select size="small" v-model="params.supplierType" filterable clearable @change="changeCompanyType">
              <el-option v-for="item in companyTypeList" :value="item.type" :label="item.name"
                         :key="item.type"></el-option>
            </el-select>
          </p>
        </div>
        <div style="display: flex;flex-direction: column;
justify-content: space-around">
          <p style="margin-left: 50px">
            <el-button size="small" style="background-color: #303e9d;color: #eeeeee;width: 70px" @click="_search">搜 索
            </el-button>
            <el-button size="small" style="background-color: #303e9d;color: #eeeeee;width: 70px" @click="_reset">重 置
            </el-button>
          </p>

          <p><span>选择地址：</span>
            <el-select size="small" v-model="params.parentCode" filterable clearable>
              <el-option v-for="item in addressList" :label="item.name" :value="item.code" :key="item.code"></el-option>
            </el-select>
          </p>
        </div>
      </div>
    </div>
    <div class="underTop">
      <div class="lis">
        <p class="p1">待开始</p>
        <p class="p2">{{ dataBoard.waitStartStoreNum || 0 }}</p>
        <p class="p3"><span>较昨日</span><span>{{ dataBoard.waitStartStorePercent || '0%' }}
          <el-image
              v-if="dataBoard.waitStartStorePercent<0"
              src="https://renovationcdn.jiachuangnet.com/mine/arrow-down.png"
              style="width: 10px;height: 15px;margin-left: 5px"></el-image>
          <el-image
              v-if="dataBoard.waitStartStorePercent>0"
              src="https://renovationcdn.jiachuangnet.com/mine/arrow-up.png"
              style="width: 10px;height: 15px;margin-left: 5px"></el-image>
        </span>
        </p>
      </div>
      <div class="lis">
        <p class="p1">已完工</p>
        <p class="p2">{{ dataBoard.completedStoreNum || 0 }}</p>
        <p class="p3"><span>较昨日</span><span>{{ dataBoard.completedStorePercent || '0%' }}<el-image
            v-if="dataBoard.completedStoreNum<0"
            src="https://renovationcdn.jiachuangnet.com/mine/arrow-down.png"
            style="width: 10px;height: 15px;margin-left: 5px"></el-image>
          <el-image
              v-if="dataBoard.completedStoreNum>0"
              src="https://renovationcdn.jiachuangnet.com/mine/arrow-up.png"
              style="width: 10px;height: 15px;margin-left: 5px"></el-image></span>
        </p>
      </div>
      <div class="lis">
        <p class="p1">已逾期</p>
        <p class="p2">{{ dataBoard.overdueStoreNum || 0 }}</p>
        <p class="p3"><span>较昨日</span><span>{{ dataBoard.overdueStorePercent || '0%' }}<el-image
            v-if="dataBoard.overdueStoreNum<0"
            src="https://renovationcdn.jiachuangnet.com/mine/arrow-down.png"
            style="width: 10px;height: 15px;margin-left: 5px"></el-image>
          <el-image
              v-if="dataBoard.overdueStoreNum>0"
              src="https://renovationcdn.jiachuangnet.com/mine/arrow-up.png"
              style="width: 10px;height: 15px;margin-left: 5px"></el-image></span>
        </p>
      </div>
      <div class="lis">
        <p class="p1">已验收</p>
        <p class="p2">{{ dataBoard.acceptedStoreNum || 0 }}</p>
        <p class="p3"><span>较昨日</span><span>{{ dataBoard.acceptedStorePercent || '0%' }}<el-image
            v-if="dataBoard.acceptedStoreNum<0"
            src="https://renovationcdn.jiachuangnet.com/mine/arrow-down.png"
            style="width: 10px;height: 15px;margin-left: 5px"></el-image>
          <el-image
              v-if="dataBoard.acceptedStoreNum>0"
              src="https://renovationcdn.jiachuangnet.com/mine/arrow-up.png"
              style="width: 10px;height: 15px;margin-left: 5px"></el-image></span>
        </p>
      </div>
      <div class="lis">
        <p class="p1">售后中</p>
        <p class="p2">0</p>
        <p class="p3"><span>较昨日</span><span>+0%
          <!--          <el-image-->
          <!--            v-if="dataBoard.completedStoreNum<0"-->
          <!--            src="https://renovationcdn.jiachuangnet.com/mine/arrow-up.png"-->
          <!--            style="width: 10px;height: 15px;margin-left: 5px"></el-image>-->
        </span>
        </p>
      </div>
      <div class="lis">
        <p class="p1">售后逾期</p>
        <p class="p2">0</p>
        <p class="p3"><span>较昨日</span><span>+0%
          <!--          <el-image-->
          <!--            v-if="dataBoard.completedStoreNum<0"-->
          <!--            src="https://renovationcdn.jiachuangnet.com/mine/arrow-up.png"-->
          <!--            style="width: 10px;height: 15px;margin-left: 5px"></el-image>-->
        </span>
        </p>
      </div>
    </div>
    <div class="centerChart">
      <div class="leftChart">
        <p style="display: flex;justify-content: space-between"><span style="font-weight: bold">开店数量：</span>
          <el-date-picker
              v-model="dateValue1"
              size="small"
              @change="dateChange1"
              type="daterange"
              range-separator="至"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </p>
        <echart v-if="newStoreSales.xAxis.data" :echartsData="newStoreSales"
                style="height: 95%;"></echart>
      </div>
      <div class="leftChart">
        <p style="display: flex;justify-content: space-between"><span style="font-weight: bold">门店实付装修金额：</span>
          <el-date-picker
              v-model="dateValue2"
              size="small"
              @change="dateChange2"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </p>
        <echart v-if="StoreSales.xAxis.data" :echartsData="StoreSales"
                style="height: 95%;"></echart>
      </div>
    </div>
    <div class="centerChart">
      <div class="leftChart">
        <span style="font-weight: bold">售后数量：</span>
        <echart v-if="noStoreSales.xAxis.data" :echartsData="noStoreSales"
                style="height: 95%;"></echart>
      </div>
      <div class="leftChart">
        <span style="font-weight: bold">逾期量：</span>
        <echart v-if="storeSalesNo.xAxis.data" :echartsData="storeSalesNo"
                style="height: 95%;"></echart>
      </div>
    </div>
  </div>
</template>
<script>
import echart from "@/RayComponents/echart.vue";
import addressList from "../../assets/js/address";
import dayjs from "dayjs";

export default {
  meta: {title: "数据详情", icon: "el-icon-menu", authorityList: 1000, sort: 2},
  name: 'index',
  components: {
    echart,
  },
  data() {
    return {
      dateValue1: "",
      dateValue2: "",
      storeList: [],
      storeListNum: [],
      storeListDate: [],
      addressList: addressList,
      companyTypeList: [],
      payData: {},
      storeData: {},
      companyList: [],
      brandList: [],
      dataBoard: {},
      params: {
        supplierType: 1,
      },
      newStoreSales: {
        title: {
          left: "center",
          textStyle: {
            fontSize: 12, // 设置主标题的字号
            fontWeight: 'bold', // 设置标题字体加粗
            color: '#333' // 设置标题颜色
          },
        },
        grid: {
          x: 0,
          y: 45,
          x2: 0,
          y2: 0,
          containLabel: true
        },

        tooltip: {
          trigger: "axis"
        },
        calculable: true,
        xAxis: {
          type: 'category',
          // data: this.outInstallDate,
          data: [0, 0, 0, 0],
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        // toolbox: {
        //   feature: {
        //     magicType: {show: true, type: ['line', 'bar']},
        //   }
        // },
        series: [{
          // data: this.outInstallCount,//let areaNames = mapWarehouseList.map(item => item.areaName);
          data: ['2025-01-11', '2025-01-12', '2025-01-13', '2025-01-14',],
          type: 'bar',
          barWidth: 20,
          label: {
            // show: true, // 开启显示
            // position: 'top', // 数据标签位置（上方）
            // formatter: '{c}', // 数据显示格式，{c} 表示数据值
            // fontSize: 12, // 字体大小
            // color: '#2653f6' // 字体颜色
          },
          itemStyle: {
            borderRadius: [5, 5, 0, 0], // 上圆角
            // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //   {offset: 0, color: "#2653F6"},
            //   {offset: 0.5, color: "#3740E2"},
            //   {offset: 1, color: "#4235D5"},
            // ]),
            color: "#303E9D"
          },
        }]
      },
      noStoreSales: {
        title: {
          left: "center",
          textStyle: {
            fontSize: 12, // 设置主标题的字号
            fontWeight: 'bold', // 设置标题字体加粗
            color: '#333' // 设置标题颜色
          },
        },
        grid: {
          x: 0,
          y: 45,
          x2: 0,
          y2: 0,
          containLabel: true
        },

        tooltip: {
          trigger: "axis"
        },
        calculable: true,
        xAxis: {
          type: 'category',
          // data: this.outInstallDate,
          data: ['2025-07-13', '2025-07-14', '2025-07-15', '2025-07-16', '2025-07-17', '2025-07-18', '2025-07-19',],
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        // toolbox: {
        //   feature: {
        //     magicType: {show: true, type: ['line', 'bar']},
        //   }
        // },
        series: [{
          // data: this.outInstallCount,//let areaNames = mapWarehouseList.map(item => item.areaName);
          data: [10, 2, 5, 12, 3, 4, 5],
          type: 'bar',
          barWidth: 20,
          label: {
            // show: true, // 开启显示
            // position: 'top', // 数据标签位置（上方）
            // formatter: '{c}', // 数据显示格式，{c} 表示数据值
            // fontSize: 12, // 字体大小
            // color: '#2653f6' // 字体颜色
          },
          itemStyle: {
            borderRadius: [5, 5, 0, 0], // 上圆角
            // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //   {offset: 0, color: "#2653F6"},
            //   {offset: 0.5, color: "#3740E2"},
            //   {offset: 1, color: "#4235D5"},
            // ]),
            color: "#303E9D"
          },
        }]
      },
      StoreSales: {
        title: {
          left: "center",
          textStyle: {
            fontSize: 12, // 设置主标题的字号
            fontWeight: 'bold', // 设置标题字体加粗
            color: '#333' // 设置标题颜色
          },
        },
        grid: {
          x: 0,
          y: 45,
          x2: 0,
          y2: 0,
          containLabel: true
        },

        tooltip: {
          trigger: "axis"
        },
        calculable: true,
        xAxis: {
          type: 'category',
          // data: this.outInstallDate,
          data: ['2025-01-1', '2025-01-1', '2025-01-1', '2025-01-1', '2025-01-1', '2025-01-1', '2025-01-1',],
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        // toolbox: {
        //   feature: {
        //     magicType: {show: true, type: ['line', 'bar']},
        //   }
        // },
        series: [{
          // data: this.outInstallCount,//let areaNames = mapWarehouseList.map(item => item.areaName);
          data: [0, 0, 0, 0, 0, 0, 0],
          type: 'line',
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: "#2653F6"},
              {offset: 0.5, color: "rgba(59,59,219,0.3)"},
              {offset: 1, color: "rgba(59,59,219,0.1)"},
            ]),
          },
          smooth: true,
          barWidth: 20,
          label: {
            // show: true, // 开启显示
            // position: 'top', // 数据标签位置（上方）
            // formatter: '{c}', // 数据显示格式，{c} 表示数据值
            // fontSize: 12, // 字体大小
            // color: '#2653f6' // 字体颜色
          },
          itemStyle: {
            borderRadius: [5, 5, 0, 0], // 上圆角
            // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //   {offset: 0, color: "#2653F6"},
            //   {offset: 0.5, color: "#3740E2"},
            //   {offset: 1, color: "#4235D5"},
            // ]),
            color: "#303E9D"
          },
        }]
      },
      storeSalesNo: {
        title: {
          left: "center",
          textStyle: {
            fontSize: 12, // 设置主标题的字号
            fontWeight: 'bold', // 设置标题字体加粗
            color: '#333' // 设置标题颜色
          },
        },
        grid: {
          x: 0,
          y: 45,
          x2: 0,
          y2: 0,
          containLabel: true
        },

        tooltip: {
          trigger: "axis"
        },
        calculable: true,
        xAxis: {
          type: 'category',
          // data: this.outInstallDate,
          data: ['2025-01-11', '2025-01-12', '2025-01-13', '2025-01-14', '2025-01-15', '2025-01-16', '2025-01-17',],
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        // toolbox: {
        //   feature: {
        //     magicType: {show: true, type: ['line', 'bar']},
        //   }
        // },
        series: [{
          // data: this.outInstallCount,//let areaNames = mapWarehouseList.map(item => item.areaName);
          data: [10, 2, 5, 12, 3, 4, 5],
          type: 'line',
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: "#2653F6"},
              {offset: 0.5, color: "rgba(59,59,219,0.3)"},
              {offset: 1, color: "rgba(59,59,219,0.1)"},
            ]),
          },
          smooth: true,
          barWidth: 20,
          label: {
            // show: true, // 开启显示
            // position: 'top', // 数据标签位置（上方）
            // formatter: '{c}', // 数据显示格式，{c} 表示数据值
            // fontSize: 12, // 字体大小
            // color: '#2653f6' // 字体颜色
          },
          itemStyle: {
            borderRadius: [5, 5, 0, 0], // 上圆角
            // color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //   {offset: 0, color: "#2653F6"},
            //   {offset: 0.5, color: "#3740E2"},
            //   {offset: 1, color: "#4235D5"},
            // ]),
            color: "#303E9D"
          },
        }]
      },
    }
  },
  async created() {
    await this.getBrand()
  },
  methods: {
    async getCompanyType() {
      const res = await this.$api.budgetGetSupplierTypeVo({brandPartyId: this.params.brandPartyId})
      this.companyTypeList = res
      this.params.supplierType = res[0].type
      const res1 = await this.$api.storeGetBrandCompanyList({
        supplierType: res[0].type
      })
      this.companyList = res1
      await this.getData()
      await this.getChart()
    },
    async getBrand() {
      const res = await this.$api.storeGetBrandPartyList()
      console.log(res
      )
      this.brandList = res
      this.params.brandPartyId = res[0].id
      await this.getCompanyType()
    },
    async changeCompanyType(val) {
      const res = await this.$api.storeGetBrandCompanyList({
        supplierType: val
      })
      this.companyList = res
    },
    _search() {
      this.storeData = this.$options.data.call(this).storeData
      this.payData = this.$options.data.call(this).payData
      this.dateValue1 = ''
      this.dateValue2 = ''
      this.getData()
      this.getChart()
    },
    _reset() {
      this.params = this.$options.data.call(this).params
      this.getData()
      this.getChart()
    },
    async getData() {
      const params = this.params
      const dataBoard = await this.$api.storeGetDataBoard(params)
      this.dataBoard = dataBoard
    },
    async getChart() {
      const params1 = {
        ...this.params,
        startTime: this.storeData.startTime,
        endTime: this.storeData.endTime
      }
      const params2 = {
        ...this.params,
        startTime: this.payData.startTime,
        endTime: this.payData.endTime
      }
      this.newStoreSales.xAxis.data = null
      this.newStoreSales.series[0].data = null
      this.StoreSales.xAxis.data = null
      this.StoreSales.series[0].data = null
      const storeList = await this.$api.storeGetStartStoreList(params1)
      this.newStoreSales.series[0].data = storeList.map(item => item.startStoreNum)
      this.newStoreSales.xAxis.data = storeList.map(item => item.day)
      const payList = await this.$api.storeGetStoreFinanceList(params2)
      this.StoreSales.series[0].data = payList.map(item => item.money)
      this.StoreSales.xAxis.data = payList.map(item => item.day)
    },
    dateChange1(val) {
      if (val) {
        this.storeData.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.storeData.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.storeData.startTime = ''
        this.storeData.endTime = ''
      }
      this.getChart()
    },
    dateChange2(val) {
      if (val) {
        this.payData.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.payData.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.payData.startTime = ''
        this.payData.endTime = ''
      }
      this.getChart()
    }
  }
}
</script>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 150px;
  //padding: 10px;
  display: flex;
  justify-content: space-between;
}

.topLeft {
  width: 370px;
  height: 140px;
  border-radius: 10px;
  background-image: url('https://qiniushelves.jiachuangnet.com/renovation/img/V1756890378845组 14.png');
  display: flex;
  align-items: center;
  justify-content: space-around;

  p {
    color: #eeeeee;
    font-weight: 500;
    text-align: center;

    span {
      display: block;
      margin-bottom: 5px;
    }
  }
}

.topRight {
  p {
    margin-right: 100px;
  }

  display: flex;
  justify-content: space-around;
  width: 78%;
  color: #333333;
  height: 140px;
  box-sizing: border-box;
  padding: 10px 0 10px 50px;
  border-radius: 10px;
  background-color: #F3F6FD;
}

.underTop {
  width: 100%;
  height: 140px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  //padding-left: 10px;
  margin-top: 5px;

  .lis {
    width: 16%;
    height: 140px;
    background-color: #F3F6FD;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    p {
      margin-top: 5px;
    }

    .p1 {
      font-size: 16px;
    }

    .p2 {
      font-size: 23px;
      color: #303e9d;
      font-weight: bold;
    }

    .p3 {
      font-size: 14px;
      color: #919398;
      display: flex;
      align-items: center;

      span {
        display: block;
        display: flex;
        align-items: center;
        margin: 0 10px;
      }
    }
  }
}

.centerChart {
  width: 100%;
  height: 350px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .leftChart {
    width: 49.5%;
    border-radius: 10px;
    background-color: #F3F6FD;
    padding: 20px;
    box-sizing: border-box;
  }

  .rightChart {
    width: 49.5%;
    border-radius: 10px;
    background-color: #F3F6FD;
  }
}
</style>